<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        display: block;
      }
      #wrap {
        position: relative;
      }
      #wrap > div {
        position: absolute;
        width: 225px;
        border: 1px solid #cecece;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div id="wrap">
        <div>
          <img src="./img/0.jpg" />
        </div>
        <div>
          <img src="./img/1.jpg" />
        </div>
        <div>
          <img src="./img/2.jpg" />
        </div>
        <div>
          <img src="./img/3.jpg" />
        </div>
        <div>
          <img src="./img/4.jpg" />
        </div>
        <div>
          <img src="./img/5.jpg" />
        </div>
        <div>
          <img src="./img/6.jpg" />
        </div>
        <div>
          <img src="./img/7.jpg" />
        </div>
        <div>
          <img src="./img/8.jpg" />
        </div>
        <div>
          <img src="./img/9.jpg" />
        </div>
        <div>
          <img src="./img/5.jpg" />
        </div>
        <div>
          <img src="./img/6.jpg" />
        </div>
        <div>
          <img src="./img/7.jpg" />
        </div>
        <div>
          <img src="./img/8.jpg" />
        </div>
        <div>
          <img src="./img/9.jpg" />
        </div>
        <div>
          <img src="./img/5.jpg" />
        </div>
        <div>
          <img src="./img/1.jpg" />
        </div>
        <div>
          <img src="./img/2.jpg" />
        </div>
        <div>
          <img src="./img/3.jpg" />
        </div>
        <div>
          <img src="./img/4.jpg" />
        </div>
      </div>
    </div>
    <script>
      var datas = ["./img/0.jpg", "./img/5.jpg", "./img/9.jpg"];
      //宽度相同，高度参差不齐的多列布局方式，随着滚动条向下滚动不断加载新的数据进行填充
      /*
        1. 几列？每列的宽度一样   大盒子的宽度/（区块宽度+间距）
        2. 先排第一行
        3. 再排剩余的区块
        4. 加载新的数据块，按照前面的方式进行填充
        */
      window.onload = function () {
        var oWrap = document.querySelector("#wrap"); //大盒子
        //var aItems = oWrap.querySelectorAll("div"); //所有的区块 动态的新增和减少元素，对长度没有任何影响，你最初是多少就是多少
        var aItems = oWrap.getElementsByTagName("div"); //动态的新增和减少元素，会通过长度体现出来
        console.log(aItems.length);
        var mg = 20; //区块间距
        var perWidth = aItems[0].offsetWidth + mg; //一个单位宽
        var cols = parseInt(oWrap.offsetWidth / perWidth); //列数
        var arrHei = []; //用来保存每列的高度的

        //先排第一行 第一行的区块top值是相同的，姑且设为0，第一行的区块left有规律
        for (var i = 0; i < cols; i++) {
          aItems[i].style.top = 0;
          aItems[i].style.left = i * perWidth + "px";
          arrHei.push(aItems[i].offsetHeight);
        }
        //排剩余的区块 确定那一列高度最小，有个前提是把所有列的高度都取出来，存数组里

        //求数组的最小值及索引
        //console.log(arrHei);
        function getMin(arr) {
          var minIndex = 0; //假设第一个值最小
          for (var i = 1; i < arr.length; i++) {
            //让minIndex对应的值和后面所有的值进行比较
            if (arr[minIndex] > arr[i]) {
              minIndex = i;
            }
          }
          //循环结束后minIndex是最小值的索引
          return [minIndex, arr[minIndex]]; //第一个值最小值索引，第二个值是最小值
        }
        //console.log(getMin(arrHei));

        //封装一个函数，排其他区块
        function confirmOtherPostion(num) {
          for (var i = num; i < aItems.length; i++) {
            var min = getMin(arrHei);
            aItems[i].style.left = aItems[min[0]].style.left; //left和最小高度那一列left相同
            aItems[i].style.top = min[1] + mg + "px";
            //更新高度
            arrHei[min[0]] += aItems[i].offsetHeight + mg;
          }
        }
        confirmOtherPostion(cols);
        //加载新的数据
        window.onscroll = function () {
          var st = document.documentElement.scrollTop; //滚动条滚动的距离
          var ch = document.documentElement.clientHeight; //可视区域的高度
          if (st >= getMin(arrHei)[1] - ch) {
            datas.forEach(function (src) {
              var oDiv = document.createElement("div");
              oDiv.innerHTML = "<img src='" + src + "'>";
              oWrap.appendChild(oDiv);
            });
            //排位置
            var aItems = oWrap.querySelectorAll("div");
            console.log(aItems.length);
            confirmOtherPostion(aItems.length - datas.length);
          }
        };
      };
    </script>
  </body>
</html>
